<template>
  <view class="income-summary-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">收入汇总</view>
    </view>
    
    <!-- 菜单列表 -->
    <view class="menu-section">
      <view 
        v-for="(item, index) in menuItems" 
        :key="index" 
        class="menu-item"
        @click="handleMenuClick(item)"
      >
        <image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
        <text class="menu-name">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 使用uni-app内置的路由方法

// 菜单项配置
const menuItems = ref([
  {
    name: '订单收入统计',
    icon: '/static/icons/order-income.svg',
    path: '/pages/income-summary/order-income-stats/index'
  },
  {
    name: '充值收入统计',
    icon: '/static/icons/recharge-income.svg',
    path: '/pages/income-summary/recharge-income-stats/index'
  },
  {
    name: '停车场收入汇总',
    icon: '/static/icons/parking-income.svg',
    path: '/pages/income-summary/parking-income-stats/index'
  },
  {
    name: '总体缴费周期统计',
    icon: '/static/icons/payment-cycle.svg',
    path: '/pages/income-summary/payment-cycle-stats/index'
  },
  {
    name: '停车场缴费周期统计',
    icon: '/static/icons/payment-cycle.svg',
    path: '/pages/income-summary/parking-payment-cycle-stats/index'
  }
])

// 菜单点击处理
const handleMenuClick = (item) => {
  uni.navigateTo({
    url: item.path
  })
}
</script>

<style lang="scss" scoped>
.income-summary-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx 30rpx;
  color: white;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }
}

.menu-section {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  
  .menu-item {
    width: calc(50% - 20rpx);
    margin: 10rpx;
    background-color: white;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  .menu-icon {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 20rpx;
  }
  
  .menu-name {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}
</style>